<template>
  <div>
      <el-button type="primary" style="margin-bottom: 10px;" @click="addCategory">新增分类</el-button>
      <!-- 新增分类的弹出框 -->
      <el-dialog v-model="dialogVisible" :title="id ? '修改分类' : '新增分类'" :before-close="handleBeforeClose">
        <CategoryEdit ref="categoryForm" :id="id" @success="editSuccess" />
      </el-dialog>
      <el-table
    :data="tableData"
    style=" margin-bottom: 20px"
    row-key="id"
    border
  >
    <el-table-column prop="name" label="分类名称" sortable />
    <el-table-column prop="pid" label="分类级别">
      <template #default="{row}">
          <span v-if="row.pid==0">一级分类</span>
          <span v-else>二级分类</span>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="分类编号"/>
    <!-- 操作按钮 -->
    <el-table-column prop="cz" label="操作" >
      <template #default="{ row }">
        <el-button type="warning" @click="editRow(row)">编辑</el-button>
        <el-button type="danger" @click="delRow(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import {ref,reactive,onMounted} from 'vue'
import { delCategory, getCategorylist } from '../../api/api'


const tableData=ref([])
const dialogVisible=ref(false)
const categoryForm=ref()
const id=ref(0)

onMounted(()=>{
  loadCategoryList()
})

const loadCategoryList=async()=>{
  const data=await getCategorylist()
  tableData.value=data;
}

const addCategory=()=>{
  if(categoryForm.value){
    categoryForm.value.resetForm(0)
  }
  id.value=0;
  dialogVisible.value=true
}

const editRow=row=>{
  if(categoryForm.value){
    categoryForm.value.resetForm(row.id)
  }
  id.value=row.id;
  dialogVisible.value=true
}
const editSuccess=()=>{
  loadCategoryList();
  dialogVisible.value=false;
}
const delRow=row=>{
    ElMessageBox.confirm('确定删除吗？',{
      closeOnClickModal:false,
      confirmButtonText:'确定',
      cancelButtonText:'取消'
    }).then(async()=>{
      if(await delCategory({id:row.id})){
        loadCategoryList()
      }
    }).catch(()=>{})
}
const handleBeforeClose=()=>{
  ElMessageBox.confirm('确定关闭吗？',{
    showClose:false,
    closeOnClickModal:false,
    confirmButtonText:'确定',
    cancelButtonText:'取消'
  }).then(()=>{
    dialogVisible.value=false
  }).catch(()=>{})
}
</script>


<!-- <script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import {ref,onMounted} from 'vue'
import { delCategory, getCategorylist } from '../../api/api'
import CategoryEdit from '../../components/CategoryEdit.vue'


const tableData=ref([])
const dialogVisible=ref(false)
const id=ref(0)
const categoryForm=ref()

onMounted(()=>{
  loadCategoryList()
})
const loadCategoryList=async()=>{
  const data=await getCategorylist();
  tableData.value=covertToTree(data)
}

const covertToTree=(data)=>{
  const treeData=[];
  const map={};
  for (const item of data){
    map[item.id]={...item,children:[]};
  }
  for(const item of data){
    const node=map[item.id];
    if(item.pid===0){
      treeData.push(node);
    }else{
      const parent=map[item.pid];
      parent.children.push(node);
    }
  }
  console.log(treeData)
  return treeData;
}

const editSuccess=()=>{
  loadCategoryList();
  dialogVisible.value=false;
}

const addCategory=()=>{
  if(categoryForm.value){
    categoryForm.value.resetForm(0)
  }
  id.value=0;
  dialogVisible.value=true
}

const editRow=row=>{
  if(categoryForm.value){
    categoryForm.value.resetForm(row.id)
  }
  id.value=row.id;
  dialogVisible.value=true
}

const delRow=row=>{
  if(row.pid==0&&row.children.length!=0){
    ElMessage({
      type:'warning',
      message:'该分类下存在二级分类，请先删除二级分类再删除此分类'
    })
  }else{
    ElMessageBox.confirm('确定要删除吗？',{
      closeOnClickModal:false,
      confirmButtonText:'确定',
      cancelButtonText:'取消'
    }).then(async()=>{
      if(await delCategory({id:row.id})){
        loadCategoryList()
      }
    }).catch(()=>{})
  }
}
const handleBeforeClose=()=>{
  ElMessageBox.confirm('确定要关闭吗？',{
    showClose:false,
    closeOnClickModal:false,
    confirmButtonText:'确定',
    cancelButtonText:'取消'
  }).then(()=>{
    dialogVisible.value=false
  }).catch(()=>{})
}
</script> -->